<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Giva Labs - Marquee Example Page | Giva</title>

	<!---// load jQuery from the GoogleAPIs CDN //--->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="./lib/jquery.marquee.js"></script>

	<link type="text/css" href="./css/docs.css" rel="stylesheet" media="all" />
	<link type="text/css" href="./css/jquery.marquee.css" rel="stylesheet" title="default" media="all" />
	
	<style type="text/css">
		h4, h5 {
			margin-bottom: 0;
		}
		
		.examples pre {
			margin-top: 0;
		}
		
		.marquee .author {
			display: none;
		}
		
		.marquee-author {
			float: left; 
			width: 90px; 
			text-align: right; 
			padding: 4px 5px 1px 0;
		}
	</style>

	<script type="text/javascript">
	<!--//
	var use_debug = false;

	function debug(){
		if( use_debug && window.console && window.console.log ) console.log(arguments);
	}

	// on DOM ready
	$(document).ready(function (){
		$(".marquee").marquee({
			loop: -1
			// this callback runs when the marquee is initialized
			, init: function ($marquee, options){
				debug("init", arguments);

				// shows how we can change the options at runtime
				if( $marquee.is("#marquee2") ) options.yScroll = "bottom";
			}
			// this callback runs before a marquee is shown
			, beforeshow: function ($marquee, $li){
				debug("beforeshow", arguments);

				// check to see if we have an author in the message (used in #marquee6)
				var $author = $li.find(".author");
				// move author from the item marquee-author layer and then fade it in
				if( $author.length ){
					$("#marquee-author").html("<span style='display:none;'>" + $author.html() + "</span>").find("> span").fadeIn(850);
				}
			}
			// this callback runs when a has fully scrolled into view (from either top or bottom)
			, show: function (){
				debug("show", arguments);
			}
			// this callback runs when a after message has being shown
			, aftershow: function ($marquee, $li){
				debug("aftershow", arguments);

				// find the author
				var $author = $li.find(".author");
				// hide the author
				if( $author.length ) $("#marquee-author").find("> span").fadeOut(250);
			}
		});
	});
	
	var iNewMessageCount = 0;
	
	function addMessage(selector){
		// increase counter
		iNewMessageCount++;

		// append a new message to the marquee scrolling list
		var $ul = $(selector).append("<li>New message #" + iNewMessageCount + "</li>");
		// update the marquee
		$ul.marquee("update");
	}
	
	function pause(selector){
		$(selector).marquee('pause');
	}
	
	function resume(selector){
		$(selector).marquee('resume');
	}
	//-->
	</script>
</head>

<body>

<h1>
	Giva Labs - Marquee Example Page
</h1>

<div class="examples">

<h4>Multiple Messages -- All long</h4>
<ul id="marquee1" class="marquee">
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a nulla. Lorem ipsum dolor sit amet, consectetuer.</li>
	<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tincidunt adipiscing,massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tincidunt adipiscing,massa.</li>
	<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tincidunt adipiscing,massa.</li>
	<li>Mauris ullamcorper euismod leo. Nulla congue tellus vitae ante at pede eu ligula lacinia. Integer sed sapien, rutrum nec.</li>
	<li>Aliquam erat volutpat. Fusce dolor. Vestibulum ornare congue turpis sollicitudin nunc elit. Nullam erat neque, facilisis quis.</li>
	<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam non eros sed facilisis, bibendum eu.</li>
</ul>

<h5>Sample Code</h5>
<pre><code class="html">&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function (){
  $("#marquee1").marquee();
});
&lt;/script&gt;</code></pre>

<h4>Multiple Messages -- All short (scroll from bottom up)</h4>
<ul id="marquee2" class="marquee">
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Fusce tincidunt adipiscing,massa.</li>
	<li>Mauris ullamcorper euismod leo.</li>
</ul>

<h5>Sample Code</h5>
<pre><code class="html">&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function (){
  $("#marquee2").marquee({yScroll: "bottom"});
});
&lt;/script&gt;</code></pre>

<h4>Multiple Messages -- 2 short, 1 long</h4>
<ul id="marquee3" class="marquee">
	<li>Lorem ipsum dolor sit amet.</li>
	<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tincidunt adipiscing,massa.</li>
	<li>Mauris ullamcorper euismod leo.</li>
</ul>

<p>
	<input type="button" value="Pause" onclick="pause('#marquee3');" />
	<input type="button" value="Resume" onclick="resume('#marquee3');" />
</p>


<h4>Single Short Message</h4>
<ul id="marquee4" class="marquee">
	<li>Lorem ipsum dolor sit amet.</li>
</ul>

<p>
	<input type="button" value="Add Message" onclick="addMessage('#marquee4');" />
</p>

<h4>Single Long Message</h4>
<ul id="marquee5" class="marquee">
	<li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tincidunt adipiscing,massa.</li>
</ul>

<h4>Multiple messages w/callback</h4>
<div id="marquee-author" class="marquee-author"></div>
<ul id="marquee6" class="marquee">
	<li><span class="author">Ron says:</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed a nulla. Lorem ipsum dolor sit amet, consectetuer.</li>
	<li><span class="author">Dan says:</span>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce tincidunt adipiscing,massa.</li>
	<li><span class="author">Jennifer says:</span>Mauris ullamcorper euismod leo. Nulla congue tellus vitae ante at pede eu ligula lacinia. Integer sed sapien, rutrum nec.</li>
	<li><span class="author">Ron says:</span>Aliquam erat volutpat. Fusce dolor. Vestibulum ornare congue turpis sollicitudin nunc elit. Nullam erat neque, facilisis quis.</li>
	<li><span class="author">Deron says:</span>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam non eros sed facilisis, bibendum eu.</li>
</ul>

</div>

</body>
</html>
